<script setup lang="ts">

    import { ref, reactive, onMounted } from 'vue';
    import { api } from '@/services/api';
    import { ArticleRecommendItem } from '@/services/type';

    import Sidebar from '@/views/Sidebar/index.vue';
    
    // 初始化正在加载中
    const loading = ref(true);
    // 博客推荐信息
    const recommendData = reactive<ArticleRecommendItem[]>([]);

    onMounted(async () => {
        // 获取推荐信息
        const response = await api.common.getRecommendList()
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 结果赋值
        recommendData.push(...response.data);
        // 加载结束
        loading.value = false;
    });

</script>
<template>
    <sidebar title="站长推荐">
        <template #content>
            <el-skeleton :loading="loading" :rows="3" animated>
                <template #template>
                    <div class="temp-box" style="display: flex;">
                        <div class="temp-img" style="margin-right: 10px;">
                            <el-skeleton-item variant="image" style="width: 70px; height: 48px" />
                        </div>
                        <div class="temp-text" style="width: 100%;">
                            <el-skeleton-item variant="text" />
                            <el-skeleton-item variant="text" />
                        </div>
                    </div>
                </template>
                <template #default>
                    <div class="recommend-box">
                        <ul class="recommend-list">
                            <li  class="recommend-item" v-for="(item, index) in recommendData" :key="index">
                                <div class="recommend-image"><img :src="item.thumb"></div>
                                <a :href="'/blog/detail/' + item.wznm">
                                    <p>{{ item.title }}</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </template>
            </el-skeleton>
        </template>
    </sidebar>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />